html,
body {
  height: 100%;
  overflow: hidden;
}

html {
  font-size: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  cursor: default;
  -webkit-user-select: none;
}

::-webkit-scrollbar {
  width: 0rem;
  -webkit-appearance: none;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: .3rem;
  background-color: #aaa;
}

a:focus,
button:focus,
input[type=range]:focus {
  outline: 0;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: .125rem;
  cursor: pointer;
  /*animate: 0.2s;*/
  /*box-shadow: 0px 0px 0px #000000;*/
  /*border: 1px solid #39404D;*/
  background: #39404D;
  border-radius: 1px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #ff7600;
  height: .8rem;
  width: .8rem;
  border-radius: 50%;
  background: #fd9500;
  cursor: pointer;
  margin-top: -.3375rem;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  /*background: #fff;*/
}

.page {
  display: flex;
  flex-direction: column;
  color: #fff;
  background-color: #2c2c2c;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(10, 10, 10, .3);
  border-bottom: .0625rem solid rgba(10, 10, 10, .8);
  -webkit-app-region: drag;
}

.header > button,
.header > a {
  color: #fff;
  background-color: transparent;
  border: 0;
  font-size: 1.25rem;
  padding: 1rem;
  -webkit-app-region: no-drag;
}

.header > h1 {
  font-size: 1.1rem;
  font-weight: 400;
  padding: 1rem;
  margin: 0;
}

.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: .0625rem solid rgba(100, 100, 100, .1);
}

.list ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li > a {
  display: flex;
  align-items: center;
  padding: .75rem .625rem;
  border-bottom: .0625rem solid rgba(100, 100, 100, .2);
  color: #fff;
  text-decoration: none;
}

.list li:active {
  background-color: rgba(200, 200, 200, .2);
}

.list .num {
  font-size: 2rem;
}

.list .info {
  flex: 1;
  padding: 0 1.2rem;
  overflow: hidden;
}

.list .title {
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fd9500;
  margin: 0;
}

.list .artist {
  font-size: .75rem;
}

.list .duration {
  font-size: .75rem;
  padding-right: 1rem;
}

.list .photo {
  width: 2.5rem;
}

.list .photo img {
  width: 100%;
  border: .0625rem solid rgba(50, 50, 50, .8);
  border-radius: 50%;
  overflow: hidden;
}


/* player page */

.player {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.player .disc {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.player .disc img {
  width: 10rem;
  border-radius: 50%;
  border: .0625rem solid #fd9500;
  padding: .3rem;
  transition: transform .5s linear;
}

.player .disc .duration {
  font-size: 1.5rem;
  color: rgba(253, 149, 0, 1);
  margin-top: -1.5em;
  z-index: 1;
}

.player .title {
  font-size: 1.6rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fd9500;
  margin: 0 0 .5rem;
}

.player .artist {
  font-size: 1rem;
  text-align: center;
  margin: 0;
}

.player .lyric {
  text-align: center;
  margin-bottom: 1rem;
}

.player .lyric .previous,
.player .lyric .next {
  color: rgba(255, 255, 255, .3);
}

.player .lyric .current {
  font-size: 1.1rem;
}

.player .controls {
  display: flex;
  justify-content: space-around;
  background-color: rgba(10, 10, 10, .2);
  padding: 1rem;
  font-size: 2rem;
}

.player .controls button {
  border: 0;
  background-color: transparent;
  color: #fff;
  width: 2.8125rem;
}

.player .controls button.active {
  color: #fd9500;
}

.logo {
  padding: 38px;
  margin: 50px;
  border: 2px solid #fd9500;
  width: 100px;
  line-height: 100px;
  border-radius: 15px;
  background: #2c2c2c;
  font-size: 94px;
  color: #fd9500;
}
